<template>
  <div class="deepseek-view">
    <AppHeader title="DeepSeek聊天" />

    <div class="chat-container">
      <div class="chat-messages" ref="messagesContainer">
        <div v-for="(message, index) in messages" :key="index" 
             :class="['message', message.role === 'user' ? 'user-message' : 'assistant-message']">
          <div class="message-content">
            {{ message.content }}
          </div>
        </div>
      </div>
      <div class="chat-input">
        <el-input
          v-model="userInput"
          type="textarea"
          :rows="3"
          placeholder="请输入您的问题..."
          @keyup.enter.ctrl="sendMessage"
        />
        <el-button type="primary" @click="sendMessage" :loading="loading">
          发送
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import axios from 'axios'
import AppHeader from '../components/AppHeader.vue'

const messages = ref([
  {
    role: 'system',
    content: 'You are a helpful assistant.'
  }
])
const userInput = ref('')
const loading = ref(false)
const messagesContainer = ref(null)

const scrollToBottom = async () => {
  await nextTick()
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

const sendMessage = async () => {
  if (!userInput.value.trim() || loading.value) return

  // 添加用户消息
  messages.value.push({
    role: 'user',
    content: userInput.value
  })

  userInput.value = ''
  loading.value = true

  try {
    const response = await axios.post('http://localhost:8080/zwart/user/deepseek', {
      model: 'deepseek-chat',
      messages: messages.value,
      stream: false
    })

    // 添加助手回复
    if (response.data && response.data.choices && response.data.choices[0]) {
      messages.value.push({
        role: 'assistant',
        content: response.data.choices[0].message.content
      })
    }
  } catch (error) {
    console.error('Error sending message:', error)
    messages.value.push({
      role: 'assistant',
      content: '抱歉，发生了错误，请稍后重试。'
    })
  } finally {
    loading.value = false
    await scrollToBottom()
  }
}

onMounted(() => {
  scrollToBottom()
})
</script>

<style scoped>
.deepseek-view {
  padding: 15px;
  padding-top: 60px; /* Add padding for the fixed header */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 8px;
  word-break: break-word;
}

.user-message {
  align-self: flex-end;
  background-color: #409EFF;
  color: white;
}

.assistant-message {
  align-self: flex-start;
  background-color: #f4f4f5;
  color: #333;
}

.chat-input {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 12px;
}

.chat-input .el-input {
  flex: 1;
}

.chat-input .el-button {
  align-self: flex-end;
}
</style> 